<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script type="text/javascript" src="js/echarts.min.js" ></script>
		<script type="text/javascript" src="js/jquery.min.js" ></script>
		<title></title>
	</head>
	<body>
		
		<div id="main" style="height:650px;width:1300px;margin:50px auto;border:1px solid #ccc;background: #f2f2f2;position: relative;">
			<div id="china_map" style="width:960px;height:650px;margin:0 auto;position: absolute;top:10px;left:80px;display: block;"></div>
		</div>
			
		<script>
			$().ready(function(){
			 /*echarts*/
                var option ={
                    title: {
                        text: "手机销量",
                        subtext: "纯属虚构",
                        x: "center"
                    },
                    tooltip: {
                        trigger: "item"
                    },
                    legend: {
                        orient: "vertical",
                        x: "left",
                        data: ["iphone3", "iphone4", "iphone5"]
                    },
                    dataRange: {
                        min: 0,
                        max:2500,
                        x: "left",
                        y: "bottom",
                        inRange: {
                            color: ['#e0ffff', '#006edd']
                        },
                        text: ["高", "低"],
                        calculable: true
                    },
                    toolbox: {
                        show: true,
                        orient: "vertical",
                        x: "right",
                        y: "bottom",
                        feature: {
                            mark: {
                                show: true
                            },
                            dataView: {
                                show: true,
                                readOnly: false
                            },
                            restore: {
                                show: true
                            },
                            saveAsImage: {
                                show: true
                            }
                        }
                    },
                    roamController: {
                        show: true,
                        x: "right",
                        mapTypeControl: {
                            china: true
                        }
                    },
                    series: [
                        {
                            name: "iphone3",
                            type: "map",
                            mapType: "china",
                            roam: false,
                            mapValueCalculation: "sum",
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true
                                    }
                                },
                                emphasis: {
                                    label: {
                                        show: true
                                    }
                                }
                            },
                            data: [
                                {
                                    value: 234,
                                    name: "北京"
                                },
                                {
                                    value: 532,
                                    name: "天津"
                                },
                                {
                                    value: 134,
                                    name: "上海"
                                },
                                {
                                    value: 983,
                                    name: "重庆"
                                },
                                {
                                    value: 783,
                                    name: "河北"
                                },
                                {
                                    value: 345,
                                    name: "河南"
                                },
                                {
                                    value: 872,
                                    name: "云南"
                                },
                                {
                                    value: 94,
                                    name: "辽宁"
                                },
                                {
                                    value: 342,
                                    name: "黑龙江"
                                },
                                {
                                    value: 989,
                                    name: "湖南"
                                },
                                {
                                    value: 767,
                                    name: "安徽"
                                },
                                {
                                    value: 675,
                                    name: "山东"
                                },
                                {
                                    value: 874,
                                    name: "新疆"
                                },
                                {
                                    value: 874,
                                    name: "江苏"
                                },
                                {
                                    value: 878,
                                    name: "浙江"
                                },
                                {
                                    value: 928,
                                    name: "江西"
                                },
                                {
                                    value: 44,
                                    name: "湖北"
                                },
                                {
                                    value: 448,
                                    name: "广西"
                                },
                                {
                                    value: 887,
                                    name: "甘肃"
                                },
                                {
                                    value: 903,
                                    name: "山西"
                                },
                                {
                                    value: 673,
                                    name: "内蒙古"
                                },
                                {
                                    value: 563,
                                    name: "陕西"
                                },
                                {
                                    value: 747,
                                    name: "吉林"
                                },
                                {
                                    value: 112,
                                    name: "福建"
                                },
                                {
                                    value: 473,
                                    name: "贵州"
                                },
                                {
                                    value: 647,
                                    name: "广东"
                                },
                                {
                                    value: 838,
                                    name: "青海"
                                },
                                {
                                    value: 626,
                                    name: "西藏"
                                },
                                {
                                    value: 515,
                                    name: "四川"
                                },
                                {
                                    value: 172,
                                    name: "宁夏"
                                },
                                {
                                    value: 77,
                                    name: "海南"
                                },
                                {
                                    value: 837,
                                    name: "台湾"
                                },
                                {
                                    value: 677,
                                    name: "香港"
                                },
                                {
                                    value: 43,
                                    name: "澳门"
                                }
                            ]
                        },
                        {
                            name: "iphone4",
                            type: "map",
                            mapType: "china",
                            roam: false,
                            mapValueCalculation: "sum",
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true
                                    }
                                },
                                emphasis: {
                                    label: {
                                        show: true
                                    }
                                }
                            },
                            data: [
                                {
                                    value: 623,
                                    name: "北京"
                                },
                                {
                                    value: 322,
                                    name: "天津"
                                },
                                {
                                    value: 57,
                                    name: "上海"
                                },
                                {
                                    value: 566,
                                    name: "重庆"
                                },
                                {
                                    value: 737,
                                    name: "河北"
                                },
                                {
                                    value: 846,
                                    name: "安徽"
                                },
                                {
                                    value: 748,
                                    name: "新疆"
                                },
                                {
                                    value: 949,
                                    name: "浙江"
                                },
                                {
                                    value: 747,
                                    name: "江西"
                                },
                                {
                                    value: 848,
                                    name: "山西"
                                },
                                {
                                    value: 737,
                                    name: "内蒙古"
                                },
                                {
                                    value: 848,
                                    name: "吉林"
                                },
                                {
                                    value: 727,
                                    name: "福建"
                                },
                                {
                                    value: 626,
                                    name: "广东"
                                },
                                {
                                    value: 747,
                                    name: "西藏"
                                },
                                {
                                    value: 747,
                                    name: "四川"
                                },
                                {
                                    value: 747,
                                    name: "宁夏"
                                },
                                {
                                    value: 325,
                                    name: "香港"
                                },
                                {
                                    value: 509,
                                    name: "澳门"
                                }
                            ]
                        },
                        {
                            name: "iphone5",
                            type: "map",
                            mapType: "china",
                            roam: false,
                            mapValueCalculation: "sum",
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true
                                    }
                                },
                                emphasis: {
                                    label: {
                                        show: true
                                    }
                                }
                            },
                            data: [
                                {
                                    value: 673,
                                    name: "北京"
                                },
                                {
                                    value: 636,
                                    name: "天津"
                                },
                                {
                                    value: 633,
                                    name: "上海"
                                },
                                {
                                    value: 99,
                                    name: "广东"
                                },
                                {
                                    value: 998,
                                    name: "台湾"
                                },
                                {
                                    value: 222,
                                    name: "香港"
                                },
                                {
                                    value: 666,
                                    name: "澳门"
                                }
                            ]
                        }
                    ],
                    color: ["#87cefa", "#da70d6", "rgb(50, 205, 50)", "#6495ed", "#ff69b4", "#ba55d3", "#cd5c5c", "#ffa500", "#40e0d0", "rgb(30, 144, 255)", "#ff6347", "#7b68ee", "#00fa9a", "#ffd700", "#6699FF", "#ff6666", "#3cb371", "#b8860b", "#30e0e0"],
                    backgroundColor: "blue"
                }
				   $.get('json/china.json', function (mapJson) {
				   		echarts.registerMap('china', mapJson);
					    var chart = echarts.init(document.getElementById('china_map'));//在id为mainMap的dom元素中显示地图
					  	chart.setOption(option);
						});
					});
		</script>
	</body>
</html>
